import React, { useRef, useState } from 'react'

export default function Test() {
  const [count, setCount] = useState(10)
  // !#1 timer 是一个 ref 对象，timer.current 就是初始值 null
  const timer = useRef(null)
  // useRef 的返回值可以实现，多次渲染之间共享数据（类似于全局变量，但和全局变量不同的是多个组件实例之间不会相互影响）

  const handleClick = () => {
    // !#2
    clearInterval(timer.current)
    // !#3
    timer.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>倒计时</button>
    </div>
  )
}
